import { useState } from 'react'

import './movepic.css'
const movepic: React.FC<any> = ({ list }) => {
    // 使用 useState Hook 来定义一个状态 currentIndex，初始值为 0。setCurrenIndex 是用来更新这个状态的函数
    const [currentIndex, setCurrenIndex] = useState(0)
    console.log('222', list);


// 处理鼠标离开事件。当鼠标离开时，将 currentIndex 重置为 0,在鼠标离开时，将索引恢复为初始状态。

    const handeMouse = () => {
        console.log(111);

        setCurrenIndex(0)
    }

// 鼠标在特定元素上移动事件

    const handeleMouseMove = (event: any) => {
        const { clientX, target } = event
//从事件对象event中解构出了 clientX（鼠标在视口的 X 坐标）和 target（事件源元素）。 
        console.log('event', event);
 // target.getBoundingClientRect() 会返回一个对象，包含元素的位置和大小的信息（left 和 right）
        const { left, right } = target.getBoundingClientRect()

        // 计算元素的宽度并确定鼠标在这个元素内的位置（作为宽度的比例）
        const width = right - left

        // 根据这个比例计算出新的索引 newIndex，这个索引对应于 list 中的某个项目

        const offset = ((clientX - left) / width) * list.length
        const newIndex = Math.floor(offset)
  //确保 newIndex 在有效范围内（0 到 list.length - 1），然后使用 setCurrenIndex(newIndex) 更新当前索引的状态 
        if (newIndex >= 0 && newIndex < list.length) {
            setCurrenIndex(newIndex)
        }

    }


    return (
        <div className='movepicbox'>

   
        <div className='movepicimg' onMouseMove={handeleMouseMove} onMouseLeave={handeMouse}>
            <img src={list[currentIndex]} alt="" />
            <div className='movepicbox_opc'>{currentIndex + 1}/{list.length}</div>
        </div>

            <div className='movepictitle'>
             <span>高级简约商务企业招商会招商会</span>
            </div>

             </div>
    )
}

export default movepic
